<template>
  <ContainerGroup>
    <Container height="fill" display="flexY">
      <!-- <FilterForm
        ref="filterForm"
        :elements="bottomFilters"
        @submit="handleSearch"
        @reset="handlerReset"
      >
        <Button type="info" :loading="dcLoading" icon="export" @click="handleExport">导出</Button>
      </FilterForm>-->
      <div class="btn-box">
        <Button type="info" :loading="dcLoading" icon="export" @click="handleExport">导出</Button>
      </div>
      <Table :columns="tableColumns" :loading="tableLoading" :data="tableData">
        <template #mc="{row}">{{ row.mc | numberToCurrency }}</template>
        <template #md="{row}">{{ row.md | numberToCurrency }}</template>
        <template #initialBalance="{row}">{{ row.initialBalance | numberToCurrency }}</template>
        <template #endBalance="{row}">{{ row.endBalance | numberToCurrency }}</template>
      </Table>
    </Container>
  </ContainerGroup>
</template>
<script>
import { DeptDirectorFundBalanceByCode, downloadE } from '@/apis/kzrFound'
export default {
  name: 'Kzrdetails', // 明细
  props: {
    currentDate: Array,
    currentRow: Object
  },
  data() {
    return {
      dcLoading: false,
      bottomFilters: [
        {
          key: 'yearMonth',
          label: '时间',
          mode: 'monthrange',
          type: 'date-picker',
          format: 'yyyy-MM',
          value: [this.currentDate[0], this.currentDate[1]],
          defaultValue: [this.currentDate[0], this.currentDate[1]],
          width: 340
        }
      ],
      tableColumns: [
        {
          title: '年',
          dataIndex: 'years',
          width: 80
        },
        {
          title: '月',
          dataIndex: 'months',
          width: 60
        },
        {
          title: '部门编码',
          dataIndex: 'deptCode',
          width: 100
        },
        {
          title: '部门名称',
          dataIndex: 'deptName',
          width: 120
        },
        {
          title: '事项',
          dataIndex: 'description'
        },
        {
          title: '收入',
          dataIndex: 'mc',
          width: 150,
          type: 'otherTag'
        },
        {
          title: '支出',
          dataIndex: 'md',
          width: 150,
          type: 'otherTag'
        }
        // {
        //   title: '期初',
        //   dataIndex: 'initialBalance',
        //   type: 'otherTag'
        // },
        // {
        //   title: '期末余额',
        //   dataIndex: 'endBalance',
        //   type: 'otherTag'
        // }
      ],
      total: 0,
      pageSize: 10,
      currentPage: 1,
      tableLoading: false,
      tableData: [],
      newCondition: {},
      newTopCondition: null,
      rowValue: null
    }
  },
  created() {
    this.getData()
  },
  methods: {
    handleExport() {
      // 导出
      const param = {
        dateTimeStart: this.currentDate[0] + '-01',
        dateTimeEnd: this.currentDate[1] + '-01',
        deptCode: this.currentRow.deptCode
      }
      this.dcLoading = true
      downloadE(param).then(res => {
        this.dcLoading = false
        const blob = new Blob([res.data], {
          type: res.data.type + 'charset=utf-8'
        })
        const downloadLink = document.createElement('a')
        const URL = window.URL || window.webkitURL || window.moxURL
        const downUrl = URL.createObjectURL(blob)
        downloadLink.href = downUrl
        downloadLink.download = '科主任基金明细.xlsx'
        downloadLink.click()
        window.URL.revokeObjectURL(downUrl)
        // document.body.removeChild(downloadLink) // 删除 a 标签
      })
    },
    handleSearch(value) {
      this.newCondition = value
      this.currentPage = 1
      this.getData()
    },
    getData() {
      const params = {
        dateTimeStart: this.currentDate[0] + '-01',
        dateTimeEnd: this.currentDate[1] + '-01',
        deptCode: this.currentRow?.deptCode
      }
      this.tableLoading = true
      DeptDirectorFundBalanceByCode(params)
        .then(res => {
          this.tableLoading = false
          if (res.data.code === 200) {
            this.tableData = res.data.data
          } else {
            this.$message.error(res.data.message)
          }
        })
        .catch(() => {
          this.tableLoading = false
        })
    },
    handlerReset(val) {
      // this.handleSearch()
    }
    // pageChange(payload) {
    //   this.currentPage = payload.current
    //   this.pageSize = payload.pageSize
    //   this.getData()
    // }
  }
}
</script>
<style lang="less" scoped>
.row-s {
  display: flex;
  align-items: center;
}
/deep/.ck-dialog-container {
  top: -5vh !important;
}
.btn-box {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}
.demo-ruleForm {
  width: 400px;
}
</style>
